<template>
    <div class="my">
        <div class="top-box">
            <div class="tab">
                <div class="info">
                    <section class="login">
                        <div class="avatar">
                            <!-- <img v-if="user_id" :src="userInfo.avatar || headerImg" /> -->
                            <img class="img1" :src="info.avatar" alt="">
                            <div class="user" @click="personalcenter">
                                <span>{{info.nickname}}</span>
                                <span>✍</span>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="mine">
                    <div v-for="(item, index) in mineList" :key="index" class="mine-item" :class="item.style">
                        <p class="count">{{item.count}}</p>
                        <p class="name">{{item.name}}</p>
                        <p class="note">{{item.note}}</p>
                    </div>
                </div>
                <div class="to-set" @click="yueke">
                    <img src="~@/assets/theme-img/icon_person_edit.png" />
                    <span>去约课</span>
                </div>
            </div>
        </div>
        <div class="to-share">
            <div class="box">
                <img class="img2" src="~@/assets/images/icon_person_share.png" />
                <div>
                    <p class="big">邀请好友注册APP，享多重好礼</p>
                    <p class="sub">限时特惠，多邀多得</p>
                </div>
            </div>
        </div>
        <ul class="menu-box">
            <li>
                <p class="title">课程相关</p>
                <div class="item-box">
                    <div class="item">
                        <img class="icon-teacher" src="~@/assets/theme-img/icon_person_teacher.png" />
                        <p>关注的老师</p>
                    </div>
                    <div class="item">
                        <img class="icon-collect" src="~@/assets/theme-img/icon_person_collect.png" />
                        <p>我的收藏</p>
                    </div>
                </div>
            </li>

            <li>
                <p class="title">订单相关</p>
                <div class="item-box">
                    <div class="item">
                        <img class="icon-order" src="~@/assets/theme-img/icon_person_order.png" />
                        <p>课程订单</p>
                    </div>
                    <div class="item">
                        <img class="icon-order" src="~@/assets/theme-img/icon_person_order.png" />
                        <p>会员订单</p>
                    </div>
                    <div class="item">
                        <img class="icon-order" src="~@/assets/theme-img/icon_person_order.png" />
                        <p>约课订单</p>
                    </div>
                </div>
            </li>
            <li>
                <p class="title">我的账户</p>
                <div class="item-box">
                    <div class="item">
                        <img class="icon-coupon" src="~@/assets/theme-img/icon_person_coupon.png" />
                        <p>优惠券</p>
                        <span></span>
                    </div>
                    <div class="item" @click="turnPage('Card')">
                        <img class="icon-card" src="~@/assets/theme-img/icon_person_card.png" />
                        <p>学习卡</p>
                    </div>
                    <div class="item">
                        <img class="icon-vip" src="~@/assets/theme-img/icon_person_vip.png" />
                        <p>会员</p>
                    </div>
                </div>
            </li>
            <li>
                <p class="title">自助服务</p>
                <div class="item-box">
                    <div class="item">
                        <img class="icon-news" src="~@/assets/theme-img/icon_person_news.png" />
                        <p>我的消息</p>
                        <span></span>
                    </div>
                    <div class="item">
                        <img class="icon-mail" src="~@/assets/theme-img/icon_person_mail.png" />
                        <p>意见反馈</p>
                    </div>
                    <div class="item">
                        <img class="icon-custom" src="~@/assets/theme-img/icon_person_custom.png" />
                        <p>在线客服</p>
                    </div>
                    <div class="item" @click="out">
                        <img class="icon-custom" src="~@/assets/theme-img/icon_person_setting.png" />
                        <p>设置</p>
                    </div>
                    <!-- <router-link class="item" :to="{ name: '' }">
              <img class="icon-about" src="~@/assets/theme-img/icon_person_about.png" />
              <p>关于我们</p>
            </router-link> -->
                </div>
            </li>
        </ul>
        <Footer></Footer>
        <Zhezhao></Zhezhao>

    </div>
</template>

<script>
    import Footer from "../Footer"
    import Zhezhao from "../zhezhao"
    export default {
        name: 'My',
        components: {
            Footer,
            Zhezhao,
        },
        data() {
            return {
                info: {},
                mineList: [{
                    count: 0,
                    name: "我的特色课",
                    note: "已购特色课程的学习",
                    style: "my-study",
                    url: "MyStudy"
                },
                {
                    count: 0,
                    name: "一对一辅导",
                    note: "我的一对一老师辅导",
                    style: "my-plan",
                    url: "Record"
                },
                {
                    count: 0,
                    name: "剩余学习币",
                    note: "查看剩余学习币",
                    style: "my-period",
                    url: "MyCurrency"
                }
                ],
            }
        },
        mounted() {
            if (window.localStorage.getItem('userinfo')) {
                this.info = JSON.parse(window.localStorage.getItem('userinfo'))
            }
            // console.log(this.info)
        },
        methods: {
            personalcenter() {
                this.$router.push("/person")
            },
            yueke() {
                this.$router.push("/oto")
            },
            out(name, query) {

                this.$router.push("/out")
              
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .my {
        overflow: hidden;
        padding-bottom: 150px;
        background: #eee;
    }

    .tab {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 9.2rem;
        background-color: #fff;
        box-shadow: 0 0 0.32rem 0 rgba(0, 0, 0, .05);
        border-radius: .13333rem;
        height: 4.6rem;
    }

    .tab .info .login {
        overflow: hidden;
        margin: .4rem 0 0 .4rem;
        margin: 4vw 0 0 4vw;
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .tab .to-set {
        position: absolute;
        top: .88rem;
        right: 0;
        width: 1.48rem;
        height: .66667rem;
        line-height: .66667rem;
        border-top-left-radius: .26667rem;
        border-bottom-left-radius: .26667rem;
        background-color: #eb6100;
        text-align: center;
        vertical-align: middle;
        color: white;
    }

    .top-box {
        height: 5.8rem;
        background: url("~@/assets/theme-img/user_bg.png") no-repeat top center;
        background-size: 100%;
        background-color: #fff;
        position: relative;
        padding: 0 30px;
    }

    .img1 {
        width: 1.57rem;
        height: 1.57rem;
        border-radius: 50%;
    }

    .mine {
        width: 100%;
        height: 88px;
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .mine-item {
        width: 33%;
        text-align: center;
        position: relative;
        margin-top: .4rem;
        border: 1px solid #eee;
    }

    .count {
        width: 126px;
        height: 38px;
        line-height: 38px;
        color: #eb6100;
        font-size: 22px;
    }

    .name {
        width: 126px;
        height: 15px;
        font-size: 14px;
    }

    .note {
        width: 126px;
        height: 12px;
        color: #b7b7b7;
        font-size: 14px;
    }

    .to-share {
        width: 100%;
        padding: 30px 30px 0;
        background-color: #fff;
        box-sizing: border-box;
    }

    .box {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 50px;
        background: linear-gradient(-90deg, rgba(242, 153, 90, 1), rgba(235, 97, 0, 1));
        border-radius: 44px;
    }

    .img2 {
        display: block;
        width: 22px;
        height: 20px;
        margin: 0 25px 0 30px;
    }

    .big {
        font-size: 14px;
        color: #fff;
        line-height: 12px;
    }

    .sub {
        margin-top: 5px;
        font-size: 14px;
        color: #fff;
        line-height: 16px;
    }

    .menu-box {
        width: 380px;
        background-color: #fff;

    }

    .menu-box>li {
        width: 350px;
        height: 110px;
        padding: 10px 0;
        margin-left: 12px;
        border-bottom: 1px solid #eee;
    }

    .title {
        width: 381px;
        height: 17px;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #333;
        line-height: 17px;
    }

    .item-box {
        display: flex;
        justify-content: flex-start;
        width: 381px;
        height: 70px;
    }

    .item {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: column;
        width: 95px;
        height: 70px;
        line-height: 70px;
        text-align: center;
    }

    img {
        display: inline-block;
        width: 20px;
    }

    p {
        font-size: 14px;
        color: #666;
        line-height: 15px;
        margin-top: 5px;
    }

    .avatar {
        width: 150px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .user {
        line-height: 60px;
    }
</style>